4.14.1 Examples of IMG Alignment

You can print this page to see all the alignments!

ALIGN="top"

<p> <IMG SRC="testicon.gif" ALT="[Test image]" 
ALIGN=TOP> Here is some text related to the test image.  
It is not very interesting, but should show how the 
text is wrapped around the image given the ALIGN=TOP 
alignment attribute.

Here is some text related to the test image. It is not very interesting, but should show how the text is wrapped around the image given the ALIGN=TOP alignment attribute.

ALIGN="texttop"

<p> <IMG SRC="testicon.gif" ALT="[Test image]" 
ALIGN=texttop> Here is some text related to the test image.  
It is not very interesting, but should show how the 
text is wrapped around the image given the ALIGN=texttop 
alignment attribute.

Here is some text related to the test image. It is not very interesting, but should show how the text is wrapped around the image given the ALIGN=texttop alignment attribute.

ALIGN="Bottom"

<p> <IMG SRC="testicon.gif" ALT="[Test image]" ALIGN=BOTTOM> 
Here is some text related to the test image.
It is not very interesting, but should show how the 
text is wrapped around the image given the ALIGN=BOTTOM 
alignment attribute.

Here is some text related to the test image. It is not very interesting, but should show how the text is wrapped around the image given the ALIGN=BOTTOM alignment attribute.

ALIGN="absbottom"

<p> <IMG SRC="testicon.gif" ALT="[Test image]" 
ALIGN=ABSBOTTOM> Here is some text related to the test image.  
It is not very interesting, but should show how the 
text is wrapped around the image given the ALIGN=absbottom 
alignment attribute.

Here is some text related to the test image. It is not very interesting, but should show how the text is wrapped around the image given the ALIGN=absbottom alignment attribute.

ALIGN="middle"

<p> <IMG SRC="testicon.gif" ALT="[Test image]" 
ALIGN=MIDDLE> Here is some text related to the test image.  
It is not very interesting, but should show how the 
text is wrapped around the image given the ALIGN=MIDDLE 
alignment attribute.

Here is some text related to the test image. It is not very interesting, but should show how the text is wrapped around the image given the ALIGN=MIDDLE alignment attribute.

ALIGN="absmiddle"

<p> <IMG SRC="testicon.gif" ALT="[Test image]" 
ALIGN=ABSMIDDLE> Here is some text related to the test image.  
It is not very interesting, but should show how the 
text is wrapped around the image given the ALIGN=absmiddle
alignment attribute.

Here is some text related to the test image. It is not very interesting, but should show how the text is wrapped around the image given the ALIGN=absmiddle alignment attribute.

ALIGN="baseline"

<p> <IMG SRC="testicon.gif" ALT="[Test image]" 
ALIGN=BASELINE> Here is some text related to the test image.  
It is not very interesting, but should show how the 
text is wrapped around the image given the ALIGN=baseline 
alignment attribute.  

Here is some text related to the test image. It is not very interesting, but should show how the text is wrapped around the image given the ALIGN=baseline alignment attribute.

ALIGN="left"

Note also the use of BR elements to break the text flow.

<p> <IMG SRC="testicon.gif" ALT="[Test image]" 
ALIGN=LEFT> Here is some text related to the test image. <br> 
It is not very interesting, but should show how the 
text is wrapped around the image given the <br clear="left">
 ALIGN=leftcalignment attribute. . Note how the element
<br clear="left"> clears the flow of text to fall after the image.

Here is some text related to the test image.
It is not very interesting, but should show how the text is wrapped around the image given
the ALIGN=left alignment attribute.

ALIGN="right"

<p> <IMG SRC="testicon.gif" ALT="[Test image]" 
ALIGN=RIGHT> Here is some text related to the test image.  
It is not very interesting, but should show how the 
text is wrapped around the image given the ALIGN=right
alignment attribute.

Here is some text related to the test image. It is not very interesting, but should show how the text is wrapped around the image given the ALIGN=right alignment attribute.

Image as Hypertext Anchor

<p> <a href="image_examples.html"> <IMG SRC="testicon.gif" 
ALT="[Test image]" ALIGN=MIDDLE> </a>  This icon 
is also a hypertext link (in this case, just back to
this document).

This icon is also a hypertext link (in this case, just back to this document).

Other Image Alignment Test Pages

John Van Essen of the University of Minnesota has assembled another image alignment test page -- have a look at:
http://www.umn.edu/nlhome/m266/vanes002/imgtest/.